<template>
  <!-- tctk 视频模板 -->
  <div class="wdsp">
    <!-- 头部 -->
    <div class="row">
      <div class="line"></div>
      <div>视频模板</div>
      <div class="iconfont icon-close" @click="closeSpmb">&#xe61d;</div>
    </div>
    <!-- 列表 竖版 type.value == 2 -->
    <div class="video-list-s">
      <div
        v-for="(row, index) in videoList"
        :key="index"
        class="video-list-row"
      >
        <div v-for="(col, i) in row" :key="i" class="video-list-col">
          <video
            controls
            :src="'http://admin.yingwangke.com' + col.video"
          ></video>
          <div class="time">{{ "01:06" }}</div>
          <div class="actions">
            <div class="use" @click="useModel(col)">使用</div>
          </div>
          <div class="titleTip">{{ col.title }}</div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <!-- <div class="spmb-page">
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="limt"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="currentChange"
      >
      </el-pagination>
    </div> -->
    <!-- ai 模板表单弹窗 -->
    <el-dialog
      :visible.sync="showSpmbDialog"
      width="50%"
      :show-close="false"
      class="ai-dialog"
    >
      <!-- 表单 -->
      <div class="vedio-form">
        <div class="upload-list">
          <div v-for="(item, key) in formData" :key="key" class="form-item">
            <!-- 图片上传    -->
            <upload-image
              v-if="item.type == 'image' || item.type == 'images'"
              :for_Id="key"
              :item="item"
              @uploadImage="uploadFile($event, key)"
              @deleteImage="deleteFile($event, key)"
            ></upload-image>
            <!-- 音频上传 -->
            <upload-audio
              v-if="item.type == 'musics'"
              :for_Id="key"
              :item="item"
              @uploadAudio="uploadFile($event, key)"
              @deleteAudio="deleteFile($event, key)"
            ></upload-audio>
            <!-- 视频上传 -->
            <upload-video
              v-if="item.type == 'videos'"
              :for_Id="key"
              :item="item"
              @uploadVideo="uploadFile($event, key)"
              @deleteVideo="deleteFile($event, key)"
            ></upload-video>
            <!-- 场景数 -->
            <div v-if="item.type == 'number'" class="tmpl-number">
              <div class="value">
                <el-input-number
                  v-model="item.value"
                  :min="1"
                  :max="10"
                  label="描述文字"
                ></el-input-number>
              </div>
              <div class="label">
                <div class="label-row">{{ item.title }}</div>
                <div class="label-row">{{ item.reqtext }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 确定 重置 -->
      <div class="form-btn">
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#387CF7"
          @click="confirmTmpl"
          >确定</my-button
        >
        <my-button
          bgc="#fff"
          border="#DCDCDF"
          fontColor="#88898E"
          @click="resetTmpl"
          >重置</my-button
        >
      </div>
      <!--close icon -->
      <div class="close" @click="showSpmbDialog = false">
        <div class="iconfont icon">&#xe608;</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import uploadImage from "@/components/form/uploadImage.vue";
import uploadAudio from "@/components/form/uploadAudio.vue";
import uploadVideo from "@/components/form/uploadVideo.vue";
export default {
  components: {
    myButton,
    uploadImage,
    uploadAudio,
    uploadVideo,
  },
  data() {
    return {
      currentPage: 1,
      limt: 15,
      total: 0,
      formData: {},
      videoList: [],
      showSpmbDialog: false,
    };
  },
  mounted() {
    this.getVideoTemplate();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    async getVideoTemplate() {
      let res = await this.$api.getVideoTemplate({
        type: "tpllist",
        video_type: "tokeradd",
      });
      let arr = []; //定义外面的数组
      for (let i = 0; i < res.data.length; i += 6) {
        arr.push(res.data.slice(i, i + 6));
      }
      this.videoList = arr;
    },
    closeSpmb() {
      if (this.$route.query.from == "tctkAdd") {
        this.$router.push({ path: "/tctk/add", query: this.$route.query });
      } else {
        this.$router.push({ path: "/tctk/edit", query: this.$route.query });
      }
    },
    // 视频模板
    async useModel(mode) {
      let res = await this.$api.getVideoTemplateById({
        id: mode.id,
        type: "video",
        qt_type: "json",
      });
      this.formData = res.videodata;
      // console.log(this.formData, "fff");
      this.showSpmbDialog = true;
    },
    confirmTmpl() {
      for (let key in this.formData) {
        if (
          this.formData[key].verify == "required" &&
          this.formData[key].value == ""
        ) {
          return this.$message(this.formData[key].reqtext);
        }
        if (
          this.formData[key].type == "image" ||
          this.formData[key].type == "images"
        ) {
          this.formData[key].arr = this.formData[key].value.split("|");
        }
        if (this.formData[key].type == "musics") {
          this.formData[key].arr = this.formData[key].value.split("|");
        }
        if (this.formData[key].type == "videos") {
          this.formData[key].arr = this.formData[key].value.split("|");
        }
      }
      window.sessionStorage.setItem("tctk_tmpl", JSON.stringify(this.formData));
      this.showSpmbDialog = false;

      this.$router.push({
        path: "/tctk/add",
        query: { activeTabVal: this.$route.query.activeTabVal },
      });
    },
    resetTmpl() {
      for (let key in this.formData) {
        this.formData[key].value = "";
        this.formData[key].files = {};
      }
    },
    currentChange() {},
    async uploadFile(files, key) {
      let file = {};
      for (let k in files) {
        file[k] = file[k] ? file[k] : {};
        let formData = new FormData();
        formData.append("file", files[k], files[k].name);
        let res = await this.$api.uploadFile(formData);
        file[k].src = res.data.url;
      }
      let obj = JSON.parse(JSON.stringify(this.formData[key]));
      let value = obj.value;
      for (let a in file) {
        value = value + file[a].src + "|";
      }
      obj.value = value;
      obj.files = obj.value.split("|").filter((v) => v);
      console.log(obj, "obj");
      this.$set(this.formData, key, obj);
    },
    deleteFile(k, key) {
      let obj = JSON.parse(JSON.stringify(this.formData[key]));
      obj.files.splice(k, 1);
      let value = "";
      for (let i = 0; i < obj.files.length; i++) {
        value = value + obj.files[i] + "|";
      }
      obj.value = value;
      console.log(obj, "val");
      this.$set(this.formData, key, obj);
    },
  },
};
</script>

<style lang="less" scoped>
.wdsp {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 122px 0 110px 0;
  box-sizing: border-box;
  background-color: #fff;
}
.row {
  position: absolute;
  left: 0px;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  padding: 0px 23px 0px 46px;
  box-sizing: border-box;
  .line {
    width: 4px;
    height: 20px;
    margin-right: 12px;
    background-color: #387cf7;
  }
  .icon-close {
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    cursor: pointer;
  }
}

.video-list-s {
  width: 100%;
  height: 100%;
  padding: 0 45px;
  box-sizing: border-box;
  overflow: auto;
  .video-list-row {
    display: flex;
    width: 100%;
    height: 400px;
    margin-bottom: 35px;
    .video-list-col {
      position: relative;
      flex-shrink: 0;
      max-width: 245px;
      height: 400px;
      margin-right: 35px;
    }
    .titleTip {
      position: absolute;
      bottom: -40px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      background-color: rgb(242, 242, 242);
      color: #333;
      text-align: center;
    }
    :last-child {
      margin-right: 0;
    }
  }
}
video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  cursor: pointer;
  .use {
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.time {
  position: absolute;
  bottom: 7px;
  right: 18px;
  width: 50px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}
.form-item {
  width: 100%;
  .tmpl-number {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    .label {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;
      color: #88898e;
      font-size: 14px;
    }
    .value {
      /deep/ .el-input input {
        color: #88898e;
        &:focus {
          border: 1px solid #387cf7;
        }
      }
      margin-right: 15px;
    }
  }
}
.spmb-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  /deep/ .active {
    background-color: #387cf7 !important;
  }
}

// 弹窗样式

// 弹窗样式
.ai-dialog {
  /deep/ .el-dialog {
    border-radius: 20px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    position: relative;
    height: 700px;
    padding: 80px 60px 100px 60px;
    box-sizing: border-box;
    background-color: #fff;
    border: 2px solid #387cf7;
    border-radius: 20px;
    .vedio-form {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 0 0 100px 0;
      .upload-list {
        width: 100%;
        height: 100%;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 5px;
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #f4f7fc;
        }
        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
          // border-radius: 5px;
          background: transparent;
        }
      }
    }
    .form-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      .button {
        width: 140px;
        height: 34px;
        margin: 0 40px;
      }
    }
    .close {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(30%, -30%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background-color: #f4f7fc;
      border-radius: 50%;
      cursor: pointer;
      user-select: none;
      .icon {
        color: #dbdbdb;
        font-size: 32px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
</style>
